<template>
  <div class="music">
    <h3>Music</h3>
    <div>
        <router-link to="/Home/Music/MusicDetail/1/20">周杰伦</router-link>
        <router-link to="/Home/Music/MusicDetail/2/25">林俊杰</router-link>
        <router-link to="/Home/Music/MusicDetail/1">陈奕迅</router-link> 

        <button @click="$router.push({
           // path:'/Home/Music/MusicDetail',
           name:'MusicDetail',
            params:{id:'1',age:'20'} })">周杰伦</button>
            
        <button @click="$router.push({
            //path:'/Home/Music/MusicDetail',
            name:'MusicDetail',
            params:{id:'2',age:'20'} })">林俊杰</button>   
            
        <button @click="$router.push({
            //path:'/Home/Music/MusicDetail',
            name:'MusicDetail',
            params:{id:'3',age:null} })">陈奕迅</button>      
    </div>
    <!-- 三级路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
name:"Music",
mounted(){
    console.log("Music 打印");
},
beforeDestroy(){
    console.log("beforeDestroy 打印");
}
}
</script>

<style scoped>
.music{
    background-color: orange;
}
</style>